<template>
  <div class="addgood">
    <div class="outmain ba_f color_6 fon_14">
      <div class="title fon_16 wei t_l ba_f pad_20">商品详情</div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="1">
          <el-form ref="form" :model="form" label-width="180px">
            <el-form-item label="排序">
              <el-input v-model="form.sort" placeholder="请输入排序"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" :required="true" prop="typeId">

              <el-cascader v-model="form.typeId" :options="optionsCategory"></el-cascader>
              <el-button type="primary"  @click="createNewCategory" class="mar_l15">创建新类别</el-button>
            </el-form-item>

            <el-form-item label="商品名称" :required="true" prop="name">
              <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="商品简介" prop="body">
              <el-input type="textarea" v-model.trim="form.body" :rows="6" placeholder="请输入商品简介"></el-input>
            </el-form-item>
            <el-form-item label="商品主图" :required="true" prop="icon">
              <div class="uploadSource bor_de rel flex" v-if="form.icon">
                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                  <i class="el-icon-check" ref="imgicon1"></i>
                  <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
                </label>
                <img :src="form.icon" @click="test(1)" class="wid"/>
              </div>
              <div class="uploadSource flex-center curs" v-else @click="test(1)">
                <i class="el-icon-plus fon_40 color_d9"></i>
              </div>
              <div class="yb_margin lh16">商品主图建议尺寸：128px*128px</div>
              <attachment-img ref="img1" type="img" @attachment="imgadd1"></attachment-img>
            </el-form-item>
            <el-form-item label="商品图片">
              <div class="uploadSource bor_de rel flex" v-for="(item, index) in form.media" :key="index">
                <label class="statusLabel curs" @mouseenter="enterMultigraph(index,1)"
                       @mouseleave="leaveMultigraph(index,1)">
                  <i class="el-icon-check" :ref="`list1${index}`"></i>
                  <i class="el-icon-close" @click="deleteMultiImage(item,2,'multigraph')"></i>
                </label>
                <img :src="item" @click="test(2)" class="wid img"/>
              </div>
              <div class="uploadSource flex-center curs" @click="test(2)">
                <i class="el-icon-plus fon_40 color_d9"></i>
              </div>
              <div class="yb_margin lh16">商品详情图片建议尺寸：宽 512px</div>
              <attachment-img ref="img2" type="imgs" @attachment="multigraph1"></attachment-img>
            </el-form-item>
            <el-form-item label="最小购买量">
              <el-input-number v-model="form.minNum" controls-position="right" :min="1" :max="100000000"
                               placeholder="请输入最小购买量"></el-input-number>
            </el-form-item>
            <el-form-item label="商品单位" :required="true" prop="unit">
              <!--              <el-select v-model="form.unit" placeholder="请选择商品单位">-->
              <!--                <el-option v-for="item in optionsUnit" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
              <!--              </el-select>-->
              <el-autocomplete
                  v-model="form.unit"
                  value-key="name"
                  :fetch-suggestions="querySearchAsync4"
                  placeholder="请选择商品单位"
              ></el-autocomplete>
              <div class="bor_b_df5 boxfor"></div>
            </el-form-item>

            <el-form-item label="主料">
              <div class="spectable">
                <div class="specitem">
                  <div class="specitemrow flex mar_b30" v-for="(item,index) in form.feeding" :key="index">
                    <div class>
                      <div class="flex">
                        <div class="rowname mar_r15">
                          <div>主料名称</div>
                          <div>
                            <el-autocomplete
                                v-model="mainIngredient"
                                value-key="name"
                                :fetch-suggestions="querySearchAsync3"
                                placeholder="如：羊排"
                                @select="handleSelect3($event,index)"
                                @change="handleSelectChage3($event,index)"
                            ></el-autocomplete>
                          </div>
                        </div>

                        <div class="rowname mar_r15">
                          <div>净用量</div>
                          <div>
                            <el-input v-model="form.price" type="number" placeholder auto-complete="off"
                                      class="atinput jlinptfist">
                            </el-input>
                          </div>
                        </div>
                        <div class="rowname mar_r15">
                          <div>单位</div>
                          <div>
                            <el-autocomplete
                                v-model="item.materialName"
                                value-key="name"
                                :fetch-suggestions="querySearchAsync3"
                                placeholder="如：克"
                                @select="handleSelect3($event,index)"
                                @change="handleSelectChage3($event,index)"
                            ></el-autocomplete>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="delbtn">
                      <el-button size="mini" type="text" @click="delFeeding(index)" class="mar_t5">
                        <i class="el-icon-remove-outline mar_r5"></i>删除
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="subjectcolor2 curs" v-show="this.form.feeding.length<20" @click="addFeeding">
                  <i class="el-icon-circle-plus mar_r5"></i>添加主料
                </div>
              </div>
              <div class="bor_b_df5 boxfor"></div>
            </el-form-item>
            <el-form-item label="辅料">
              <div class="spectable">
                <div class="specitem">
                  <div class="specitemrow flex mar_b30" v-for="(item,index) in form.feeding" :key="index">
                    <div class>
                      <div class="flex">
                        <div class="rowname mar_r15">
                          <div>名称</div>
                          <div>
                            <el-autocomplete
                                v-model="item.materialName"
                                value-key="name"
                                :fetch-suggestions="querySearchAsync3"
                                placeholder="如：大葱"
                                @select="handleSelect3($event,index)"
                                @change="handleSelectChage3($event,index)"
                            ></el-autocomplete>
                          </div>
                        </div>

                        <div class="rowname mar_r15">
                          <div>净用量</div>
                          <div>
                            <el-input v-model="form.price" type="number" placeholder auto-complete="off"
                                      class="atinput jlinptfist">
                            </el-input>
                          </div>
                        </div>
                        <div class="rowname mar_r15">
                          <div>单位</div>
                          <div>
                            <el-autocomplete
                                v-model="item.materialName"
                                value-key="name"
                                :fetch-suggestions="querySearchAsync3"
                                placeholder="如：克"
                                @select="handleSelect3($event,index)"
                                @change="handleSelectChage3($event,index)"
                            ></el-autocomplete>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="delbtn">
                      <el-button size="mini" type="text" @click="delFeeding(index)" class="mar_t5">
                        <i class="el-icon-remove-outline mar_r5"></i>删除
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="subjectcolor2 curs" v-show="this.form.feeding.length<20" @click="addFeeding">
                  <i class="el-icon-circle-plus mar_r5"></i>添加辅料
                </div>
              </div>
              <div class="bor_b_df5 boxfor"></div>
            </el-form-item>
            <el-form-item label="调料">
              <div class="spectable">
                <div class="specitem">
                  <div class="specitemrow flex mar_b30" v-for="(item,index) in form.feeding" :key="index">
                    <div class>
                      <div class="flex">
                        <div class="rowname mar_r15">
                          <div>名称</div>
                          <div>
                            <el-autocomplete
                                v-model="item.materialName"
                                value-key="name"
                                :fetch-suggestions="querySearchAsync3"
                                placeholder="如：白糖"
                                @select="handleSelect3($event,index)"
                                @change="handleSelectChage3($event,index)"
                            ></el-autocomplete>
                          </div>
                        </div>

                        <div class="rowname mar_r15">
                          <div>净用量</div>
                          <div>
                            <el-input v-model="form.price" type="number" placeholder auto-complete="off"
                                      class="atinput jlinptfist">
                            </el-input>
                          </div>
                        </div>
                        <div class="rowname mar_r15">
                          <div>单位</div>
                          <div>
                            <el-autocomplete
                                v-model="item.materialName"
                                value-key="name"
                                :fetch-suggestions="querySearchAsync3"
                                placeholder="如：克"
                                @select="handleSelect3($event,index)"
                                @change="handleSelectChage3($event,index)"
                            ></el-autocomplete>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="delbtn">
                      <el-button size="mini" type="text" @click="delFeeding(index)" class="mar_t5">
                        <i class="el-icon-remove-outline mar_r5"></i>删除
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="subjectcolor2 curs" v-show="this.form.feeding.length<20" @click="addFeeding">
                  <i class="el-icon-circle-plus mar_r5"></i>添加辅料
                </div>
              </div>
              <div class="bor_b_df5 boxfor"></div>
            </el-form-item>
            <el-form-item label="售卖规格">
              <div class="spectable">
                <div class="specitem" v-show="this.form.spec.length<1">
                  <div class="specitemrow flex mar_b30">
                    <div class>
                      <div class="flex">
                        <div class="rowname mar_r15">
                          <div>
                            <span class="color-red">*</span>价格
                          </div>
                          <el-input v-model="form.price" type="number" placeholder auto-complete="off"
                                    class="atinput jlinptfist">
                            <template slot="append">元</template>
                          </el-input>
                        </div>
                        <div class="rowname mar_r15">
                          <div>
                            <span class="color-red">*</span>包装费
                          </div>
                          <el-input v-model="form.boxMoney" type="number" placeholder auto-complete="off"
                                    class="atinput jlinptfist">
                            <template slot="append">元</template>
                          </el-input>
                        </div>
                        <div class="rowname mar_r15 rowkucun">
                          <div>
                            <span class="color-red">*</span>库存
                          </div>
                          <div class="flex">
                            <el-input v-model="form.stock" type="number" placeholder auto-complete="off"
                                      class="atinput jlinptfist">
                              <template slot="append">件</template>
                            </el-input>
                            <el-checkbox v-model="form.fillType" :true-label="'1'" :false-label="'2'" border>次日置满
                            </el-checkbox>
                            <div>
                              <el-button v-if="initial.more" size="mini" type="text" class="mar_l20" @click="showzhe()">
                                收起
                              </el-button>
                              <el-button v-else size="mini" type="text" class="mar_l20" @click="showzhe()">更多
                              </el-button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="flex mar_t10" v-show="initial.more">
                        <!--                                                <div class="rowname mar_r15">-->
                        <!--                                                    <div>划线价格</div>-->
                        <!--                                                    <el-input v-model="form.crossedPrice" type="number" placeholder=""-->
                        <!--                                                              auto-complete="off"-->
                        <!--                                                              class="atinput jlinptfist">-->
                        <!--                                                        <template slot="append">元</template>-->
                        <!--                                                    </el-input>-->
                        <!--                                                </div>-->
                        <div class="rowname mar_r15">
                          <div>成本价格</div>
                          <el-input v-model="form.costPrice" type="number" placeholder auto-complete="off"
                                    class="atinput jlinptfist">
                            <template slot="append">元</template>
                          </el-input>
                        </div>
                        <div class="rowname rowname2 mar_r15">
                          <div>商品编号</div>
                          <el-input v-model="form.goodCode" type="number" placeholder auto-complete="off"
                                    class="atinput jlinptfist"></el-input>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="specitem">
                  <div class="specitemrow flex mar_b30" v-for="(item,index) in form.spec" :key="index">
                    <div class>
                      <div class="flex">
                        <div class="rowname mar_r15">
                          <div>规格名称</div>
                          <div>
                            <!--                            <el-select v-model="item.specName" value-key="id" class="atinput" filterable placeholder="如：杯型" @blur="selectSpecBlur($event,item)">-->
                            <!--                              <el-option v-for="item in specsData" :key="item.id" :label="item.name" :value="item.name"></el-option>-->
                            <!--                            </el-select>-->
                            <el-autocomplete
                                v-model="item.specName"
                                value-key="name"
                                :fetch-suggestions="querySearchAsync"
                                placeholder="请输入内容"
                                @select="handleSelect"
                            ></el-autocomplete>
                          </div>
                        </div>
                        <div class="rowname mar_r15">
                          <div>价格</div>
                          <el-input v-model="item.price" type="number" placeholder auto-complete="off"
                                    class="atinput jlinptfist">
                            <template slot="append">元</template>
                          </el-input>
                        </div>
                        <div class="rowname mar_r15">
                          <div>包装费</div>
                          <el-input v-model="item.boxMoney" type="number" placeholder auto-complete="off"
                                    class="atinput jlinptfist">
                            <template slot="append">元</template>
                          </el-input>
                        </div>
                        <div class="rowname mar_r15 rowkucun">
                          <div>库存</div>
                          <div class="flex">
                            <el-input v-model="item.stock" type="number" placeholder auto-complete="off"
                                      class="atinput jlinptfist">
                              <template slot="append">件</template>
                            </el-input>
                            <el-checkbox v-model="item.fillType" :true-label="'1'" :false-label="'2'" border>次日置满
                            </el-checkbox>
                            <div>
                              <el-button v-if="item.more" size="mini" type="text" class="mar_l20"
                                         @click="showzhe(index)">收起
                              </el-button>
                              <el-button v-else size="mini" type="text" class="mar_l20" @click="showzhe(index)">更多
                              </el-button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="flex mar_t10" v-show="item.more">
                        <!--                                                <div class="rowname mar_r15">-->
                        <!--                                                    <div>划线价格</div>-->
                        <!--                                                    <el-input v-model="item.crossedPrice" type="number" placeholder=""-->
                        <!--                                                              auto-complete="off"-->
                        <!--                                                              class="atinput jlinptfist">-->
                        <!--                                                        <template slot="append">元</template>-->
                        <!--                                                    </el-input>-->
                        <!--                                                </div>-->
                        <div class="rowname mar_r15">
                          <div>成本价格</div>
                          <el-input v-model="item.costPrice" type="number" placeholder auto-complete="off"
                                    class="atinput jlinptfist">
                            <template slot="append">元</template>
                          </el-input>
                        </div>
                        <div class="rowname rowname2 mar_r15">
                          <div>商品编号</div>
                          <el-input v-model="item.goodCode" type="number" placeholder auto-complete="off"
                                    class="atinput jlinptfist"></el-input>
                        </div>
                      </div>
                    </div>
                    <div class="delbtn">
                      <el-button size="mini" type="text" @click="delSpec(index)" class="mar_t5 mar_l20">
                        <i class="el-icon-remove-outline mar_r5"></i>删除
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="subjectcolor2 curs" v-show="this.form.spec.length<20" @click="addSpec">
                  <i class="el-icon-circle-plus mar_r5"></i>添加规格，最多20个
                </div>
              </div>
              <div class="bor_b_df5 boxfor"></div>
            </el-form-item>

            <el-form-item label="售卖属性">
              <div class="spsx">
                <div class="t_l">
                  <div class v-for="(item,index) in attribute" :key="index">
                    <div class="clr flex wid mar_t10">
                      <div class="clr_l flex-g-0 pad_r_20 t_l">
                        <span class="color-red">*</span>属性名称:
                      </div>
                      <div class="clr_r flex-g-1 pad_l_30">
                        <span class="color-red">*</span>属性值（至少填写两个，最多八个）
                      </div>
                    </div>
                    <div class="clr flex wid flex-y-top">
                      <div class="clr_l flex-g-0 pad_r_20 t_l shuxingname">
                        <!--                                <el-input v-model="item.attributeName" placeholder="如：辣度" auto-complete="off" class="atinput"></el-input>-->
                        <!--                        <el-select v-model="item.attrName" class="atinput" filterable placeholder="如：辣度" @blur="selectAttBlur($event,item)" @change="selectAttChange($event,item)">-->
                        <!--                          <el-option v-for="item in attrsData" :key="item.id" :label="item.name" :value="item.name"></el-option>-->
                        <!--                        </el-select>-->
                        <el-autocomplete
                            v-model="item.attrName"
                            value-key="name"
                            :fetch-suggestions="querySearchAsync2"
                            placeholder="如：辣度"
                            @select="handleSelect2"
                        ></el-autocomplete>
                      </div>
                      <div class="clr_r flex-g-1 pad_l_30 flex atinputbox flex-wrap flex-y-top">
                        <el-select v-model="item.attrStr[index].name" class="atinput" filterable
                                   @blur="selectValueBlur($event,item,index)"
                                   @focus="selectValueChange($event,item,index)"
                                   v-for="(itemSelect , index)  in  item.attrStr" :key="index">
                          <el-option v-for="item in item.attrShow" :key="item.sxz" :label="item.sxz"
                                     :value="item.sxz"></el-option>
                        </el-select>
                        <el-button size="mini" type="text" @click="delAttribute(index)" class="mar_t5">
                          <i class="el-icon-remove-outline mar_r5"></i>删除
                        </el-button>
                      </div>
                    </div>
                    <div class="bor_b_df5 boxfor"></div>
                  </div>
                  <div class="subjectcolor2 curs" v-show="this.attribute.length<20" @click="addAttribute">
                    <i class="el-icon-circle-plus mar_r5"></i>添加属性，最多20个
                  </div>
                </div>
              </div>
              <div class="bor_b_df5 boxfor"></div>
            </el-form-item>

            <el-form-item label="售卖加料">
              <div class="spectable">
                <div class="specitem">
                  <div class="specitemrow flex mar_b30" v-for="(item,index) in form.feeding" :key="index">
                    <div class>
                      <div class="flex">
                        <div class="rowname mar_r15">
                          <div>加料名称</div>
                          <div>
                            <!--                            <el-select v-model="item.materialName" class="atinput" filterable placeholder="如：杯型" @change="selectFeedingBlur($event,item)">-->
                            <!--                              <el-option v-for="item in feedingData" :key="item.id" :label="item.name" :value="item.name"></el-option>-->
                            <!--                            </el-select>-->
                            <el-autocomplete
                                v-model="item.materialName"
                                value-key="name"
                                :fetch-suggestions="querySearchAsync3"
                                placeholder="如：杯型"
                                @select="handleSelect3($event,index)"
                                @change="handleSelectChage3($event,index)"
                            ></el-autocomplete>
                          </div>
                        </div>
                        <div class="rowname mar_r15">
                          <div>价格</div>
                          <el-input v-model="item.salesPrice" type="number" placeholder auto-complete="off"
                                    class="atinput jlinptfist">
                            <template slot="append">元</template>
                          </el-input>
                        </div>
                        <div class="rowname mar_r15 rowkucun" style="width: 130px">
                          <div class="color_f">库存</div>
                          <div class="flex">
                            <!--                                                        <el-input v-model="item.salesStock" type="number" placeholder=""-->
                            <!--                                                                  auto-complete="off"-->
                            <!--                                                                  class="atinput jlinptfist">-->
                            <!--                                                            <template slot="append">件</template>-->
                            <!--                                                        </el-input>-->
                            <el-checkbox v-model="item.fillType" :true-label="'1'" :false-label="'2'" border>次日置满
                            </el-checkbox>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="delbtn">
                      <el-button size="mini" type="text" @click="delFeeding(index)" class="mar_t5">
                        <i class="el-icon-remove-outline mar_r5"></i>删除
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="subjectcolor2 curs" v-show="this.form.feeding.length<20" @click="addFeeding">
                  <i class="el-icon-circle-plus mar_r5"></i>添加加料，最多20个
                </div>
              </div>
              <div class="bor_b_df5 boxfor"></div>
            </el-form-item>

            <el-form-item label="售卖时间">
              <el-radio-group v-model="form.salesType">
                <el-radio label="1">全时段售卖</el-radio>
                <el-radio label="2">自定义时间</el-radio>
              </el-radio-group>
              <div v-show="form.salesType=='2'">
                <el-form-item label="选择时间段">
                  <el-date-picker v-model="form.validity" type="daterange" range-separator="至"
                                  start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                  <el-checkbox-group v-model="form.weekDay">
                    <el-checkbox label="周一"></el-checkbox>
                    <el-checkbox label="周二"></el-checkbox>
                    <el-checkbox label="周三"></el-checkbox>
                    <el-checkbox label="周四"></el-checkbox>
                    <el-checkbox label="周五"></el-checkbox>
                    <el-checkbox label="周六"></el-checkbox>
                    <el-checkbox label="周日"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="售卖时间段">
                  <el-radio-group v-model="form.weekSalesType">
                    <el-radio label="1">全时段售卖</el-radio>
                    <el-radio label="2">自定义时间</el-radio>
                  </el-radio-group>
                  <div class="mar_t10" v-show="form.weekSalesType=='2'">
                    <div class="time_item mar_b10" v-for="(item,index) in form.salesTimeStr" :key="index">
                      <el-time-select placeholder="起始时间" v-model="item.startTime"
                                      :picker-options="{start: '00:00',step: '00:15',end: '23:59' }"
                                      style="width: 200px;"></el-time-select>
                      <el-time-select placeholder="结束时间" v-model="item.endTime"
                                      :picker-options="{start: '00:00',step: '00:15',end: '23:59',minTime: item.startTime}"
                                      style="width: 200px;" class="mar_l20"></el-time-select>
                      <el-button type="text" @click="deltimeInterval(index)" class="fon_12 mar_l10">删除</el-button>
                    </div>
                    <el-button v-show="form.salesTimeStr.length<3" type="text" @click="addtimeInterval">
                      <Icon type="md-add"/>
                      添加时段
                    </el-button>
                  </div>
                </el-form-item>
              </div>
              <div class="bor_b_df5 boxfor"></div>
            </el-form-item>
            <el-form-item label="参与热销排行">
              <el-radio-group v-model="form.hotsaleType">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="特色分类">
              <el-radio-group v-model="form.specialType">
                <el-radio label="0">无</el-radio>
                <el-radio label="1">{{ xinping }}</el-radio>
                <el-radio label="2">{{ remai }}</el-radio>
                <el-radio label="3">{{ tuijian }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="单点时不配送">
              <el-radio-group v-model="form.aloneType">
                <el-radio label="1">是，不配送</el-radio>
                <el-radio label="2">否，正常配送</el-radio>
              </el-radio-group>
            </el-form-item>
            <!--            <el-form-item label="组合套餐">-->
            <!--              <el-button type="text" @click="chooseGood">选择商品</el-button>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item v-if="form.comboGoodsArr&&form.comboGoodsArr.length>0&&!dialogTableVisible">-->
            <!--              <el-table-->
            <!--                      ref="multipleTable"-->
            <!--                      :data="form.comboGoodsArr"-->
            <!--                      tooltip-effect="dark"-->
            <!--                      style="width: 50%"-->
            <!--              >-->
            <!--                <el-table-column-->
            <!--                        prop="id"-->
            <!--                        label="商品ID">-->
            <!--                </el-table-column>-->
            <!--                <el-table-column-->
            <!--                        prop="icon"-->
            <!--                        label="商品图片"-->
            <!--                        width="120">-->
            <!--                  <template slot-scope="scope">-->
            <!--                    <img :src="scope.row.icon" style="width: 50px;height: 50px" />-->
            <!--                  </template>-->
            <!--                </el-table-column>-->
            <!--                <el-table-column-->
            <!--                        prop="name"-->
            <!--                        label="商品名称"-->
            <!--                        show-overflow-tooltip>-->
            <!--                </el-table-column>-->
            <!--                <el-table-column-->
            <!--                        prop="price"-->
            <!--                        label="商品价格"-->
            <!--                        width="120">-->
            <!--                  <template slot-scope="scope">-->
            <!--                    ￥{{scope.row.price}}-->
            <!--                  </template>-->
            <!--                </el-table-column>-->
            <!--                <el-table-column-->
            <!--                        prop="name"-->
            <!--                        label="选择数量"-->
            <!--                        width="120">-->
            <!--                  <template slot-scope="scope">-->
            <!--                    <el-input v-model="scope.row.num"></el-input>-->
            <!--                  </template>-->
            <!--                </el-table-column>-->
            <!--              </el-table>-->
            <!--            </el-form-item>-->
            <el-form-item label="商品详情">
              <baidu-ueditor :content="form.details" @ueditor="getUeditor"></baidu-ueditor>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!--                <el-tab-pane label="详情页" name="2">-->
        <!--                    <el-form ref="form2" :model="form2" label-width="180px">-->
        <!--                        <el-form-item label="商品详情">-->
        <!--                            <baidu-ueditor :content='form2.details' @ueditor='getUeditor'></baidu-ueditor>-->
        <!--                        </el-form-item>-->
        <!--                    </el-form>-->
        <!--                </el-tab-pane>-->
        <el-tab-pane label="其他信息" name="3">
          <el-form ref="form3" :model="form3" label-width="180px">
            <!--                        <el-form-item label="会员折扣">-->
            <!--                            <el-checkbox v-model="form3.isMember" :true-label="'1'" :false-label="'2'" class="mar_l20">-->
            <!--                                参加会员折扣-->
            <!--                            </el-checkbox>-->
            <!--                        </el-form-item>-->
            <el-form-item label="每单限购">
              <!--                            <el-input v-model="form3.maxNum" placeholder="请输入每单限购" auto-complete="off"-->
              <!--                                      class="" type="number">-->
              <!--                                <template slot="append">件</template>-->
              <!--                            </el-input>-->
              <el-input-number v-model="form3.maxNum" controls-position="right" :min="0" :max="100000000"
                               placeholder="请输入每单限购"></el-input-number>
              <div class="yb_margin lh16">用户下单每单限购的数量</div>
            </el-form-item>
            <el-form-item label="虚拟销量">
              <!--                            <el-input v-model="form3.salesNum" placeholder="虚拟销量" class="yinput">-->
              <!--                                <template slot="append">件</template>-->
              <!--                            </el-input>-->
              <el-input-number v-model="form3.virtualSales" controls-position="right" :min="0" :max="100000000"
                               placeholder="请输入虚拟销量"></el-input-number>
              <div class="yb_margin lh16">前台显示的商品总销量=设置的虚拟销量+真实销量值</div>
            </el-form-item>
            <el-form-item label="打印标签">
              <el-select v-model="form3.printLabel" placeholder="打印标签">
                <el-option v-for="item in printData" :key="item.name" :label="item.name" :value="item.id"></el-option>
              </el-select>
              <div class="yb_margin lh16">打印机可按照标签打印此商品</div>
            </el-form-item>
            <el-form-item label="商品标签">
              <el-select v-model="form3.goodLabel" placeholder="商品标签">
                <el-option v-for="item in labelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              <!--                            <el-radio-group v-model="form3.goodLabel">-->
              <!--                                <el-radio v-for="label in labelList" :label="label.id" :key="label.id">{{label.name}}-->
              <!--                                </el-radio>-->
              <!--                            </el-radio-group>-->
              <!--                            <el-checkbox-group v-model="form3.goodLabel">-->
              <!--                                <el-checkbox v-for="label in labelList" :label="label.id" :key="label.id">{{label.name}}</el-checkbox>-->

              <!--                            </el-checkbox-group>-->
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="选择商品" :visible.sync="dialogTableVisible">
      <el-table
          ref="tableData"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="商品ID">
        </el-table-column>
        <el-table-column
            prop="icon"
            label="商品图片"
            width="120">
          <template slot-scope="scope">
            <img :src="scope.row.icon" style="width: 50px;height: 50px"/>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="商品名称"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="price"
            label="商品价格"
            width="120">
          <template slot-scope="scope">
            ￥{{ scope.row.price }}
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--                prop="name"-->
        <!--                label="选择数量"-->
        <!--                width="120">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-input v-model="scope.row.num"></el-input>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <span style="display: flex;justify-content: space-between;align-items: center;margin-top: 20px">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.size"
            :current-page.sync="page.currentPage"
            @current-change="handleCurrentChange"
        />
          <el-button type="primary" @click="choose">确 定</el-button>
        </span>
    </el-dialog>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </div>
    <edit ref="edit" @fetchData="fetchData"></edit>
  </div>
</template>

<script>
import vabQuill from '@/plugins/vabQuill';
import Edit from "./components/goodclassedit";
// import { quillEditor } from 'vue-quill-editor'
// import quillConfig from '../../assets/css/quill/quill-config.js'
import baiduUeditor from '@/plugins/baidu-ueditor';
import attachmentImg from '@/plugins/attachment-img';
import {changeDate} from '@/utils/index';
import {
  goodRender,
  attrShow,
  goodsSave,
  goodDetail,
  getLabelList,
  getPrintList,
  specialCategory,
  getGoodList, categoryList
} from '@/api/good';

export default {
  created() {
    this.init();
    this.initlist()
    console.log('this.$route.params.id;', this.$route.query.id);
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.edit();
    }
    if (this.$route.query.goodsType) {
      this.form.goodsType = this.$route.query.goodsType;
    }
  },
  components: {vabQuill, attachmentImg, baiduUeditor,Edit},
  data() {
    return {
      content: '<h2>hello quill-editor111</h2>',
      // quillOption: quillConfig,
      activeName: '1',
      dialogVisible: false,
      mainIngredient:[], // 主材
      secondaryIngredient:[], //辅材
      seasoning:[], //调料
      form: {
        sort: '1', //排序
        body: '', //简介
        name: '', //名称
        typeId: [], //分类
        icon: '', //商品主图
        media: [], //图片
        minNum: '', //起购
        unit: '', //单位
        boxMoney: '0', //单规格包装费
        price: '1', //单规格价格
        stock: '999', //单规格库存
        fillType: '', //单规格次日置满
        crossedPrice: '', //单规格划线价格
        costPrice: '', //单规格成本价格
        goodCode: '', //单规格商品编号
        salesType: '1', //售卖时间类别
        validity: [new Date(), new Date().getTime() + 3600 * 1000 * 24 * 30], //选择时间段数组，默认一个月
        weekDay: [], //星期选择
        weekSalesType: '1', //售卖时间段类别
        salesTimeStr: [], //添加时间段
        hotsaleType: '1', //热销排行
        specialType: '0',
        aloneType: '2', //单店不配送
        spec: [], //商品多规格
        feeding: [], //商品加料
        attribute: [],
        details: '', //商品详情
        comboGoodsArr: []
      },
      attribute: [], //商品属性
      form2: {
        details: '' //商品详情
      },
      form3: {
        isMember: '', //会员折扣
        maxNum: '', //每单限购
        virtualSales: '', //虚拟销量
        goodLabel: 0, //商品标签
        printLabel: '' //打印标签
      },
      labelList: '',
      printData: [],
      initial: {
        more: ''
      },
      optionsCategory: [], //商品分类列表
      optionsUnit: [], //商品单位列表
      specsData: [], //商品规格列表
      attrsData: [], //商品属性列表
      feedingData: [], //商品加料列表
      attrShow: [], //选择属性后请求的属性值
      id: '',
      specialList: [],
      remai: '',
      xinping: '',
      tuijian: '',
      timeout: null,
      dialogTableVisible: false,
      tableData: [],
      multipleSelection: [],
      page: {
        total: 10,
        size: 500,
        currentPage: 1
      },
    };
  },
  methods: {
    async initlist() {
      var params = {
        page: this.page.currentPage,
        size: this.page.size,
        type: this.$route.query.type || '',
        goodsType: this.$route.query.goodsType || ''
      };
      this.listLoading = false;
      const {data, count} = await getGoodList(params);
      this.tableData = data.data
      this.page.total = count
    },
    chooseGood() {
      if (this.form.id) {
        this.tableData = this.tableData.filter(x => x.id != this.form.id && x.comboGoodsArr == '')
      } else {
        this.tableData = this.tableData.filter(x => x.comboGoodsArr == '')
      }
      this.dialogTableVisible = true
      if (this.form.comboGoodsArr.length > 0) {
        let hasSelectList = this.form.comboGoodsArr.map((x) => ({id: x.id}))
        let arr = []
        for (let i = 0; i < hasSelectList.length; i++) {
          arr.push(hasSelectList[i].id)
        }
        this.$nextTick(() => {
          this.tableData.forEach(row => {
            if (arr.indexOf(row.id) >= 0) {
              this.$refs.tableData.toggleRowSelection(row, true);
            }
          })
        })
      }
    },
    choose() {
      this.dialogTableVisible = !this.dialogTableVisible
    },
    handleSelectionChange(val) {
      this.form.comboGoodsArr = val.map((x) => ({
        num: 1,
        id: x.id,
        name: x.name,
        icon: x.icon,
        price: x.price,
        storeId: x.storeId
      }));
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.initlist()
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.specsData;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 100 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    querySearchAsync2(queryString, cb) {
      var restaurants = this.attrsData;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 100 * Math.random());
    },
    handleSelect2(item) {
      console.log(item);
    },
    querySearchAsync3(queryString, cb) {
      var restaurants = this.feedingData;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 100 * Math.random());
    },

    handleSelect3(item, index) {
      if (item.price) {
        for (let i = 0; i < this.form.feeding.length; i++) {
          if (index == i) {
            this.form.feeding[i].salesPrice = item.price
          }
        }
      }
    },
    handleSelectChage3(item, index) {
      for (let i = 0; i < this.form.feeding.length; i++) {
        if (index == i) {
          this.form.feeding[i].salesPrice = ''
        }
      }
    },
    querySearchAsync4(queryString, cb) {
      var restaurants = this.optionsUnit;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 100 * Math.random());
    },
    async handleClick() {
      if (this.activeName == '3') {
        const {data} = await getLabelList();
        const printData = await getPrintList();
        this.labelList = data;
        if (printData.data) {
          this.printData = printData.data;
        }
      }
    },
    createNewCategory() {
      this.$refs["edit"].showEdit();
    },
    async fetchData() {
      this.listLoading = true;
      const {data, count, isInStore} = await categoryList({page: this.page.currentPage});
      this.list = data;
      this.page.total = count;
      this.isInStore = isInStore
      setTimeout(() => {
        this.listLoading = false;
      }, 300);
    },
    test(i = 0) {
      console.log(this.$refs, i);
      this.$refs['img' + i].dialogVisible = true;
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    imgadd1(url) {
      this.form.icon = url.str;
    },
    enterMultigraph(index, i = 0) {
      //多图删除，i是指文档中的第几个ref多图对象，index图片列表
      // console.log(this.$refs[`list${index}`][index],index)
      this.$refs[`list${i}${index}`][0].style.display = 'none';
    },
    leaveMultigraph(index, i = 0) {
      this.$refs[`list${i}${index}`][0].style.display = 'inline-block';
    },
    multigraph1(url) {
      if (this.form.media && this.form.media.length > 0) {
        this.form.media = this.form.media.concat(url.arr);
      } else {
        this.form.media = url.arr;
      }
    },
    deleteMultiImage(item, index, type) {
      //typem没传是单图multigraph多图；index上传图片组件排序
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (type == 'multigraph') {
        switch (index) {
          case 2:
            this.form.media.remove(item);
            break;
        }
      } else {
        switch (index) {
          case 1:
            this.form.icon = '';
            break;
        }
      }
    },
    init() {
      this.goodRender();
      this.specialCategory()
      // this.getUnit();
      // this.getSpecs();
      // this.getAttr();
      // this.getMater();
    },
    async specialCategory() {
      const {data} = await specialCategory({item: 12});
      this.specialList = data ? data : [];
      for (let i = 0; i < this.specialList.length; i++) {
        if (this.specialList[i].customName == '热卖') {
          this.remai = this.specialList[i].name
        }
        if (this.specialList[i].customName == '新品') {
          this.xinping = this.specialList[i].name
        }
        if (this.specialList[i].customName == '推荐') {
          this.tuijian = this.specialList[i].name
        }
      }
    },
    async edit() {
      const {data} = await goodDetail({id: this.id});
      console.log('编辑', data);
      // Object.keys(this.form).forEach(key=>{this.form[key]=data.detail[key]})
      this.form.sort = data.detail.sort;
      this.form.typeId = data.detail.typeId;
      this.form.aloneType = data.detail.aloneType;
      this.form.specialType = data.detail.specialType;
      this.form.body = data.detail.body;
      this.form.boxMoney = data.detail.boxMoney;
      this.form.crossedPrice = data.detail.crossedPrice;
      this.form.costPrice = data.detail.costPrice;
      this.form.fillType = data.detail.fillType;
      this.form.goodCode = data.detail.goodCode;
      this.form.hotsaleType = data.detail.hotsaleType;
      this.form.icon = data.detail.icon;
      this.form.media = data.detail.media;
      this.form.id = data.detail.id;
      this.form.minNum = data.detail.minNum;
      this.form.name = data.detail.name;
      this.form.price = data.detail.price;
      this.form.salesType = data.detail.salesType;
      this.form.specType = data.detail.specType;
      this.form.stock = data.detail.stock;
      this.form.unit = data.detail.unit;
      this.form.weekDay = data.detail.weekDay ? data.detail.weekDay : [];
      this.form.weekSalesType = data.detail.weekSalesType;
      if (data.detail.comboGoodsArr) {
        this.form.comboGoodsArr = JSON.parse(data.detail.comboGoodsArr)
      } else {
        this.form.comboGoodsArr = ''
      }
      if (data.detail.startTime) {
        this.form.validity = [data.detail.startTime, data.detail.endTime];
      }
      if (data.attrData) {
        this.attribute = data.attrData.map((v) => ({attrName: v.attrName, attrStr: v.attrStr}));
      }
      if (data.meterData) {
        this.form.feeding = data.meterData.map((v) => ({
          materialName: v.materialName,
          salesPrice: v.SalesPrice,
          salesStock: v.SalesStock,
          fillType: v.fillType
        }));
      }
      if (data.specsData) {
        this.form.spec = data.specsData.map((v) => ({
          specName: v.specsName,
          price: v.SalesPrice,
          stock: v.SalesStock,
          boxMoney: v.boxMoney,
          crossedPrice: v.crossedPrice,
          costPrice: v.costPrice,
          fillType: v.fillType,
          goodCode: v.goodCode,
          more: v.more,
          id: v.id,
          goodId: v.goodId
        }));
      }
      if (data.hoursData) {
        this.form.salesTimeStr = data.hoursData.map((v) => ({startTime: v.startTime, endTime: v.endTime}));
      }

      if (data.detail.details) {
        this.form.details = data.detail.details;
      }

      this.form3.maxNum = data.detail.maxNum;
      this.form3.isMember = data.detail.isMember;
      this.form3.virtualSales = data.detail.virtualSales;
      this.form3.goodLabel = data.detail.goodLabel ? data.detail.goodLabel.toString() : 0;

      this.form3.printLabel = data.detail.printLabel;
    },
    async goodRender() {
      const {data} = await goodRender({type: this.$route.query.goodsType});
      this.optionsCategory = data.categoryData;
      this.optionsUnit = data.unitData;
      this.specsData = data.specsData;
      this.attrsData = data.attrData;
      this.feedingData = data.materData;
    },
    // async getUnit() {
    //     const {data} = await getUnit();
    //     this.optionsUnit = data
    // },
    // async getSpecs() {
    //     const {data} = await getSpecs();
    //     this.specsData = data
    // },
    // async getAttr() {
    //     const {data} = await getAttr();
    //     this.attrsData = data
    // },
    // async getMater() {
    //     const {data} = await getMater();
    //     this.feedingData = data
    // },
    addSpec() {
      let specObj = {
        specName: '',
        price: '',
        boxMoney: '',
        stock: '',
        fillType: '',
        more: false,
        crossedPrice: '',
        costPrice: '',
        goodCode: ''
      };
      this.$set(this.form.spec, this.form.spec.length, specObj);
    },
    delSpec(index) {
      this.$delete(this.form.spec, index);
    },
    showzhe(index) {
      if (index >= 0) {
        // console.log('多规格', index)
        for (let i = 0; i < this.form.spec.length; i++) {
          if (i == index) {
            if (!this.form.spec[i].more) {
              this.form.spec[i].more = true;
            } else {
              this.form.spec[i].more = false;
            }
          }
        }
      } else {
        if (!this.initial.more) {
          this.initial.more = true;
        } else {
          this.initial.more = false;
        }
      }
    },
    selectSpecBlur(e, selectItem, index) {
      // console.log('selectSpecBlur', 111, e.target.value)
      console.log(e, selectItem, index);
      selectItem.specName = e.target.value;
    },
    selectAttBlur(e, selectItem, index) {
      // console.log('selectSpecBlur', 111, e.target.value)
      console.log(e, selectItem, index);

      // selectItem.attName = e.target.value
    },
    async selectAttChange(e, selectItem) {
      // console.log('selectAttChange',e, selectItem)
      let resultArr = this.attrsData.filter((item) => {
        return item.name === e;
      });
      const specsShow = await attrShow({id: resultArr[0].id});
      // console.log('234',specsShow.data.attr_str.map((item) => item.sxz).join())
      selectItem.attrShow = specsShow.data.attr_str;
      // selectItem = attrsData.data
      // selectItem.price = specsData.data.price
    },
    selectFeedingBlur(e, selectItem) {
      // console.log('selectSpecBlur', 111, this.feedingData)
      // console.log(e, selectItem, index)
      for (let i = 0; i < this.feedingData.length; i++) {
        if (this.feedingData[i].name == selectItem.materialName) {
          selectItem.salesPrice = this.feedingData[i].price;
        }
      }
      // selectItem.feedingName = e.target.value
    },

    // async selectSpecChange(e, selectItem,index){
    //      console.log('selectSpecChange',2222,e,selectItem)
    //     let resultArr = this.specsData.filter((item)=>{
    //         return item.name === e
    //     });
    //      const specsData = await specsShow({id:resultArr[0].id});
    //      console.log('123',specsData.data)
    //      console.log('234',selectItem,index)
    //     selectItem = specsData.data
    //     selectItem.price = specsData.data.price
    //  },
    addAttribute() {
      let attributeObj = {
        attrName: '',
        attrStr: [{name: ''}, {name: ''}, {name: ''}, {name: ''}, {name: ''}, {name: ''}, {name: ''}, {name: ''}],
        attrShow: []
      };
      this.$set(this.attribute, this.attribute.length, attributeObj);
    },
    delAttribute(index) {
      this.$delete(this.attribute, index);
    },
    selectValueBlur(e, selectItem, index) {
      this.goodRender();
      for (let i = 0; i < selectItem.attrStr.length; i++) {
        if (i == index) {
          // console.log(' selectItem.attributeValue[index]', selectItem.attrStr)
          selectItem.attrStr[index].name = e.target.value;
        }
      }
    },
    async selectValueChange(e, selectItem, index) {
      this.goodRender();
      if (selectItem.attrName) {
        let resultArr = this.attrsData.filter((item) => {
          return item.name === selectItem.attrName;
        });
        const specsShow = await attrShow({id: resultArr[0].id});
        selectItem.attrShow = specsShow.data.attr_str;
      }
    },
    delFeeding(index) {
      this.$delete(this.form.feeding, index);
    },
    addFeeding() {
      let feedingObj = {
        materialName: '',
        salesPrice: '',
        salesStock: '',
        fillType: ''
      };
      this.$set(this.form.feeding, this.form.feeding.length, feedingObj);
    },
    addtimeInterval() {
      let specObj = {startTime: '', endTime: ''};
      this.$set(this.form.salesTimeStr, this.form.salesTimeStr.length, specObj);
    },
    deltimeInterval(index) {
      this.$delete(this.form.salesTimeStr, index);
    },
    getUeditor(content) {
      this.form.details = content;
    },
    async onSubmit() {
      console.log('submit!');
      // this.form.attribute =  this.attribute.map(item =>({attrName: item.attrName,attrStr:item.attrStr.map(item => item.name && item.name)}))
      if (this.activeName == '1') {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            console.log(this.form);
            let str = changeDate(this.form.validity[0]);
            let end = changeDate(this.form.validity[1]);
            this.form.validity = [str, end];
            this.form.attribute = this.attribute;
            this.optionsUnit.forEach((item) => {
              if (item.id == this.form.unit) {
                this.form.unit = item.name;
              }
            });
            const {msg, goodsId} = await goodsSave(this.form);
            this.id = goodsId;
            // this.$router.push(`/addgood1?id=${goodsId}`);
            // this.init()
            this.$baseMessage(msg, 'success');
            if (this.form.goodsType && this.form.goodsType == 2) {
              this.$router.push({path: `/ingoodlist?currentPage=${this.$route.query.currentPage}&activeName=${this.$route.query.activeName}&type=${this.$route.query.type}`});
            } else {
              this.$router.push({path: `/good?currentPage=${this.$route.query.currentPage}&activeName=${this.$route.query.activeName}&type=${this.$route.query.type}`});
            }
          } else {
            return false;
          }
        });
      } else if (this.activeName == '2') {
        // console.log(this.form2)
        this.form2.id = this.id;
        console.log(this.form2);
        const {msg} = await goodsSave(this.form2);
        this.$baseMessage(msg, 'success');
        this.$router.push({path: `/good?currentPage=${this.$route.query.currentPage}&activeName=${this.$route.query.activeName}&type=${this.$route.query.type}`});
      } else if (this.activeName == '3') {
        this.form3.id = this.id;
        this.form3.isMember = 2;
        // console.log(this.form3)
        const {msg} = await goodsSave(this.form3);
        this.$baseMessage(msg, 'success');
        if (this.form.goodsType && this.form.goodsType == 2) {
          this.$router.push({path: `/ingoodlist?currentPage=${this.$route.query.currentPage}&activeName=${this.$route.query.activeName}&type=${this.$route.query.type}`});
        } else {
          this.$router.push({path: `/good?currentPage=${this.$route.query.currentPage}&activeName=${this.$route.query.activeName}&type=${this.$route.query.type}`});
        }
      }
    }
  }
};
</script>
<style lang="scss">
.el-form {
  margin-top: 20px;
}

.rowname {
  width: 130px;
}

.rowname2 {
  width: 235px;
}

.rowname .el-input {
  width: 100%;
}

.rowkucun {
  width: 280px;
}

.rowkucun .el-input-group__append {
  border-right: none;
}

.spsx .el-input__suffix,
.spjl .el-input__suffix,
.spgg .el-input__suffix {
  display: none;
}

.spsx .atinputbox .el-input {
  width: auto;
  margin-right: 20px;
}

.spsx .atinput .el-input__inner {
  width: 90px;
  /*margin-bottom: 10px;*/
}

.spjl .atinput .el-input__inner,
.spgg .atinput .el-input__inner {
  margin-bottom: 0;
  padding-right: 0;
}

.spjl .el-input-group__prepend,
.spgg .el-input-group__prepend {
  padding: 0 10px;
}

.spsx .jlinptfist {
  margin-right: 0px !important;
}

.spsx .jlinptfist .el-input__inner {
  border-right: none;
}

.boxfor {
  width: 70%;
  padding-bottom: 20px;
  margin-left: 3%;
}

.spsx .atinput .el-input--suffix .el-input__inner {
  padding-right: 0px;
}

.spsx .jlcon {
  margin-left: 45px;
}

.spsx .dangg .el-input__inner {
  padding-right: 0;
}

.spsx .el-form-item__content .el-input {
  width: 100% !important;
}

.spsx .clr_l {
  width: 130px;
  text-align: left;
}

.shuxingname .el-input__inner {
  width: 130px !important;
}

.atinput .el-input__inner {
  padding-right: 0 !important;
}

.el-icon-check:before {
  display: inline-block;
  margin-top: 12px;
  transform: rotate(0deg);
  position: relative;
  top: -3px;
}

.el-pagination {
  margin-top: 0 !important;
}
</style>
